<template>
  <div class="car">
    <div class="cardetails">
      <div class="carcontent">
        <p class="cartitle">轧空信息</p>
        <div class="contentitem">
          <div>轧空 编号：XXX01</div>
          <div>所属寺庙：XXX寺</div>
          <div>居住人数：2人</div>
        </div>
      </div>
      <div class="carcontent">
        <p class="cartitle">社会关系</p>
        <div class="container">
          <div class="container_title">
            <span
              v-for="(item, index) of containerTitle"
              :key="index"
              :style="{ width: item.width }"
              >{{ item.title }}</span
            >
            <span style="width: 0.364583rem"></span>
          </div>
          <div
            class="container_content"
            v-for="(item, index) of containerContent"
            :key="index"
          >
            <span style="width: 0.399583rem">{{ item.suming }}</span>
            <span style="width: 0.286458rem">{{ item.name }}</span>
            <span style="width: 0.255rem">{{ item.gender }}</span>
            <span style="width: 0.661458rem">{{ item.house }}</span>
            <span style="width: 0.770833rem">{{ item.number }}</span>
            <span class="content_details" style="width: 0.364583rem">详情</span>
          </div>
        </div>
      </div>
      <div class="carcontent">
        <p class="cartitle">轧空建筑样貌图</p>
        <div class="contentitem">
          <img
            v-for="(iten, index) of 2"
            :key="index"
            class="item_img"
            src="../../images/bg.png"
            alt=""
            srcset=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bg from "../../images/bg.png";
export default {
  data() {
    return {
      bg: bg,
      containerTitle: [
        {
          width: "0.399583rem",
          title: "俗名",
        },
        {
          width: "0.286458rem",
          title: "别名",
        },
        {
          width: "0.255rem",
          title: "性别",
        },
        {
          width: "0.661458rem",
          title: "家庭地址",
        },
        {
          width: "0.770833rem",
          title: "身份证号码",
        },
      ],
      containerContent: [
        {
          suming: "XXXXX",
          name: "XXXXXX",
          gender: "男",
          house: "XXXXXXXXXXXXXX",
          number: "500000000000000000",
        },
        {
          suming: "XXXXX",
          name: "XXXXXX",
          gender: "男",
          house: "XXXXXXXXXXXXXX",
          number: "500000000000000000",
        },
      ],
    };
  },
  mounted() {
    //  获取id
    const id = this.$route.query.id;
    console.log(id);
  },
};
</script>

<style scoped>
.car {
  padding-top: 0.260417rem /* 50/192 */;
  background: url("../../images/bg.png") no-repeat;
  width: 10rem;
  background-size: 100% 100%;
  /* background-size: cover; */
  position: fixed;
  height: 100%;
}
.cardetails {
  width: 5.208333rem /* 1000/192 */;
  height: 3.328125rem /* 639/192 */;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.072917rem /* 14/192 */;
  color: #333333;
  padding-bottom: 0.260417rem;
  margin: 0 auto;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.cartitle {
  font-size: 0.104167rem /* 20/192 */;
  padding: 0.302083rem /* 58/192 */ 0 0.130208rem /* 25/192 */ 0.302083rem
    /* 58/192 */;
  color: #066ac6;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
  /* 70/192 */
}

.contentitem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.072917rem /* 14/192 */;
  color: #999ba4;
  margin: 0 0.302083rem /* 58/192 */;
  flex-wrap: wrap;
}

.item_img {
  width: 2.109375rem /* 405/192 */;
  height: 1.333333rem /* 256/192 */;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.0625rem /* 12/192 */;
  color: rgba(153, 155, 164, 0.5);
}

.container_title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 0.302083rem /* 58/192 */;
}
.container_content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #999ba4;
  margin: 0.052083rem /* 10/192 */ 0.260417rem /* 50/192 */;
  background: rgba(0, 0, 0, 0.2);
  height: 0.182292rem /* 35/192 */;
  border-radius: 0.041667rem /* 8/192 */;
  line-height: 0.182292rem /* 35/192 */;
}

span {
  text-align: center;
}

.content_details {
  color: #ffffff;
  border-radius: 0.041667rem /* 8/192 */;
  background-color: #066ac6;
}
</style>